<template>
    <transition name="slide-fade" v-on:after-enter="afterEnter">
        <el-card :style="{ 'z-index': zIndex }" ref="slide" id="slide" class="slide-detail-card-container" :body-style="bodyStyle">
            <slot></slot>
        </el-card>
    </transition>
</template>
<script type="text/javascript">
import { getMaxIndex } from '@/utils/index'

export default {
    name: 'slide-view', // 客户管理详情 滑动view
    components: {},
    computed: {},
    watch: {},
    data() {
        return {
            zIndex: getMaxIndex()
        }
    },
    props: {
        bodyStyle: {
            type: Object,
            default: { padding: 0 }
        },
        /** 监听点击事件 隐藏视图 */
        listenerIDs: {
            type: Array,
            default: () => {
                return []
            }
        },
        /** 阻挡点击事件 隐藏视图 */
        noListenerIDs: {
            type: Array,
            default: () => {
                return []
            }
        },
        noListenerClass: {
            type: Array,
            default: () => {
                return []
            }
        },
        appendToBody: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        if (this.appendToBody) {
            document.body.appendChild(this.$el)
        }
        this.listenerIDs.forEach(element => {
            if (document.getElementById(element)) {
                document
                    .getElementById(element)
                    .addEventListener('click', this.handleDocumentClick, false)
            }
        })
    },
    methods: {
        handleDocumentClick(e) {
            var hidden = true
            this.noListenerIDs.forEach(element => {
                if (
                    document.getElementById(element) &&
                    document.getElementById(element).contains(e.target)
                ) {
                    hidden = false
                }
            })

            this.noListenerClass.forEach(element => {
                var items = document.getElementsByClassName(element)
                if (items && hidden) {
                    for (let index = 0; index < items.length; index++) {
                        const element = items[index]
                        if (element.contains(e.target)) {
                            hidden = false
                            break
                        }
                    }
                }
            })

            if (
                document.getElementById('slide') &&
                document.getElementById('slide').contains(e.target)
            ) {
                hidden = false
            }
            if (hidden) {
                this.$emit('side-close')
            }
        },
        afterEnter() {
            this.$emit('afterEnter')
        }
    },

    beforeDestroy() {
        if (this.appendToBody && this.$el && this.$el.parentNode) {
            this.$el.parentNode.removeChild(this.$el)
        }
    }
}
</script>
<style lang="scss" scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
    will-change: transform;
    transition: all 0.35s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
    transform: translateX(100%);
}
</style>
